<template>
  <div class="insure">
    <x-header v-show="!isWeChar">
      <div slot="default" class="common__header--title">添加配送信息</div>
      <div @click="goBack" slot="overwrite-left"><img slot="icon" src="~assets/x3/ico/goback1.png" class="go-back"></div>
    </x-header>
    <!-- 投保人信息 -->
    <group class="insure__formPolicy--group">
      <cell>
        <span class="insure__list--title" slot="after-title">
          <span class="insure__iconspan"></span>
          <span class="insure__iconspan--title">配送信息</span>
        </span>
      </cell>

      <div class="insure__formPolicy">
        <div>
          <x-input placeholder="姓名" class="base-input_font" id="testDemo" v-model="tdistributionDto.name" :min="2" :max="10" required>
            <div class="insure__input " slot="label">
              <img src="~assets/x3/ico/icon-name.png" class="icon-img">&nbsp&nbsp
              <!-- 姓名&nbsp -->
            </div>
          </x-input>
          <x-input class="base-input_font" placeholder="手机号码  (收取短信通知)" v-model="tdistributionDto.cellPhoneNo" keyboard="number" required>
            <div class="insure__input" slot="label">
              <img src="~assets/x3/ico/icon-tel.png" class="icon-img">&nbsp&nbsp
            </div>
          </x-input>
          <x-input class="base-input_font" placeholder="电子邮件" v-model="tdistributionDto.email" keyboard="number" required>
            <div class="insure__input" slot="label">
              <img src="~assets/x3/ico/icon-email.png" class="icon-img">&nbsp&nbsp
            </div>
          </x-input>
          <x-input class="base-input_font" placeholder="通讯地址" v-model="tdistributionDto.address" keyboard="number" required>
            <div class="insure__input" slot="label">
              <img src="~assets/x3/ico/icon-addre.png" class="icon-img">&nbsp&nbsp
            </div>
          </x-input>
        </div>
      </div>
    </group>

    <div class="insure__footer">
      <div @click="goPolicy" class="insure__rightbtn">提交</div>
    </div>
  </div>
</template>

<script>
import CarAttributively from "src/components/CarAttributively";
import { RequestUrl } from "src/common/url";
import Config from "src/common/config/insureConfig";
import {
  Mutations,
  Gender,
  PerIdentifyType,
  EntIdentifyType,
  benefType,
  insuredidentity,
  intervalTime,
  RouteUrl,
  Car_Mutations
} from "src/common/const";
import {
  XHeader,
  Group,
  Cell,
  XInput,
  Datetime,
  XSwitch,
  Selector,
  XButton,
  XDialog,
  CellFormPreview,
  Actionsheet,
  TransferDom,
  Toast,
  CheckIcon
} from "vux";
import Validation from "src/common/util/validation";
import DateUtil from "src/common/util/dateUtil";
import { mapState, mapActions } from "vuex";
export default {
  components: {
    CellFormPreview,
    XDialog,
    Selector,
    XHeader,
    Group,
    Cell,
    XInput,
    Datetime,
    XSwitch,
    XButton,
    Actionsheet,
    TransferDom,
    Toast,
    CheckIcon,
    CarAttributively
  },
  computed: mapState({
    // insure: "insure",
    isLoading: "isLoading",
    user: "user",
    axtx: "axtx",
    saveInsure: "saveInsure",
    detailsStore: "detailsStore",
    isWeChar: "isWeChar",
    carAddr: "carAddr",
    shareData: "shareData",
    initIndexData: "initIndexData",
    accessUrl: "accessUrl",
    dealUid: "dealUid"
  }),
  data() {
    return {
      test: "",
      tdistributionDto: {
        name: "",
        cellPhoneNo: "",
        address: "",
        email: "",
      }
    };
  },
  watch: {
  },
  filters: {
  },
  methods: {
    baseVal() {
      if (this.tdistributionDto.name == "") {
        return this.showErrorMsg("配送姓名不能为空!");
      }
      if (this.tdistributionDto.cellPhoneNo == "") {
        return this.showErrorMsg("配送电话不能为空!");
      }
      if (this.tdistributionDto.address == "") {
        return this.showErrorMsg("配送地址不能为空!");
      }
      if (this.tdistributionDto.email == "") {
        return this.showErrorMsg("配送邮件不能为空!");
      } else {
        if (Validation.isEmpty(this.tdistributionDto.email)) {
          return this.showErrorMsg("投保人电子邮箱不能为空");
        }
      }
      return true;
    },
    goPolicy() {
      if (this.baseVal()) {
        this.$common.storeCommit(this, Car_Mutations.COMMIT_DISTRIBUTION, this.tdistributionDto);
        this.$common.goBackUrl(this, RouteUrl.OFFER_RESULT);
      }
    },
    goBack() {
      this.$common.goBack(this);
    },
    saveData() {
      this.$common.storeCommit(this, Car_Mutations.SAVE_DISTRIBUTION, this.tdistributionDto);
    },
    setData() {

    },
    showErrorMsg(errorMsg) {
      this.$vux.alert.show({ content: this.$common.alertMsg(errorMsg, "red;") });
      return false;
    },

  },
  beforeRouteEnter(to, from, next) {
    sessionStorage["CAR_FORM_URL"] = from.path;
    next();
  },
  beforeMount() {
  },
  beforeDestroy() {
    if (sessionStorage["CAR_FORM_URL"] != "/") {
      // alert("insure beforeDestroy");
      // let parm = {
      //     curprice: this.curprice,
      //     seleCountry: this.seleCountry
      // };
      // this.$common.storeCommit(this, Mutations.INSURE_CURPRICE, parm);
      this.saveData();
    }
  },
  mounted() {
    if (sessionStorage["CAR_FORM_URL"] == "/") {
      this.$common.goUrl(this, RouteUrl.CAR_INSURE);
      return;
    }
    document.title = '添加配送信息';
    //初始化，没有footer
    this.$init.subPageInit(this);
    let _this = this;


    // window.addEventListener('load', function() {
    //     _this.saveData();
    // });
    // window.addEventListener('popstate', function(ev) {
    //     _this.saveData();
    // });

    //添加上一个页面的价钱


    this.setData();


  }
};
</script>

<style  lang="scss">
.radio-check {
  label {
    vertical-align: middle;
  }
}

.common__clause {
  margin-bottom: 50px;
}

.insure__iconspan {
  position: absolute;
  margin-top: 4px;
  width: 4px;
  height: 18px;
  background-color: #c8161d;
}

.insure__list--title {
  font-size: 15px;
  color: #c8161d;
}

.insure__iconspan--title {
  margin-left: 9px;
  font-size: 14px;
}

.insure__formPolicy {
  border: 1px solid #e7e7e7;
  margin: 0 18px;
}

.insure__formPolicy--group {
  .vux-no-group-title {
    padding-bottom: 20px;
  }
}

.insure__footer {
  position: fixed;
  bottom: 0px;
  z-index: 5;
  width: 100%;
  height: 47px;
  background-color: white;
  div {
    height: 100%;
    line-height: 47px;
    text-align: center;
    font-size: 20px;
  }
  box-shadow: 0px 0px 10px 1px #efefef;
}
.car-input {
  .weui-cell__bd {
    input {
      text-transform: uppercase;
    }
  }
}
.insure__leftbtn {
  float: left;
  width: 35%;
  background: #fff;
  color: #c8161d;
  span {
    color: #f6690a;
  }
}

.insure__rightbtn {
  background: #c8161d;
  color: #fff;
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s;
}

.fade-enter,
.fade-leave-to {
  transition: opacity 0.1s;
}

.insure__red {
  color: red;
}

.insure__green {
  color: green;
}

.insure__policyHolderType {
  font-size: 12px;
  color: #7f7f7f;
}

// .weui-input {
//     color: #000 !important;
// }
.insure__middle {
  display: initial;
  vertical-align: super;
}

.insure__input {
  line-height: 0px;
  font-size: 14px;
  color: #7f7f7f !important;
  .weui-cell__ft {
    text-align: justify;
    color: #999999;
  }
}

.weui-label {
  font-size: 14px;
  color: #7f7f7f;
}

input::-webkit-input-placeholder {
  font-size: 14px;
  color: #7f7f7f;
}

.insure__img {
  width: 15px;
  vertical-align: middle;
}

.insure__sure {
  vertical-align: middle;
}

.insure__protocol {
  vertical-align: middle;
  color: #c8161d;
}

.insure__radio {
  display: inline-flex;
}

.insure__input--Bene {
  color: #000;
  font-size: 15px;
}

.insure__iconspan--delete {
  font-size: 12px;
  color: #C8161D;
  border: 1px solid #C8161D;
  border-radius: 5px;
  padding: 2px;
  float: right;
  margin-right: 8px;
}

.insure__base--padding {
  padding-bottom: 20px;
}

.insure__clauseRead {
  border-color: aliceblue;
  white-space: pre-wrap;
  vertical-align: top;
  width: 100%;
  font-size: 15px;
  height: 75vh;
  font-family: Microsoft YaHei;
  overflow-y: scroll; // border: 1px solid #f3f3f3;
  font: 400 14.3333px Arial;
}

.dialog-Einv {
  // padding: 15px !important;
  .weui-dialog {
    max-width: 90% !important;
  }
}

.insure_sele {
  .weui-cell__bd {
    .weui-select {
      height: 20px;
      line-height: 20px; // padding-left: 0px;
      padding-left: 10px;
    }
  }
  .weui-cell__bd::after {
    right: -9px !important;
  }
}

.weui-form-preview__label {
  margin-right: 0em !important;
}

.insure__actionsheet {
  .weui-actionsheet__cell {
    padding: 0px !important;
    text-align: unset !important;
  }
}
</style>
